<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '规则',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="rules-container">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="40rpx"></wd-icon>
    </view>

    <!-- 主要内容区域 -->
    <view class="rules-content">
      <image :src="gameRuleUrl" class="rules-bg-image" />
    </view>
  </view>
</template>

<script setup lang="ts">
const gameRuleUrl = ref('')
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
onShow(() => {
  gameRuleUrl.value = uni.getStorageSync('gameRuleUrl')
})
</script>

<style lang="scss">
/* 容器样式 */
.rules-container {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

/* 返回按钮 */
.back-button {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  color: #ffffff;
  font-size: 32rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .back-icon {
    margin-right: 8rpx;
    font-size: 28rpx;
  }
}

/* 主要内容区域 */
.rules-content {
  margin: 100rpx 50rpx;
  height: 85vh;
  position: relative;
  .rules-bg-image {
    width: 100%;
    height: 100%;
  }
}
</style>
